<template>
    <div class="trade-link-group">
        <div class="grip">
            <div class="item" v-for="item in grid" :key="item.id" @click="item.click">
                <div class="icon" :style="`--icon: url(${ item.icon })`"></div>
                <div class="text">{{ item.text }}</div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { routerTo } from '@/utils/jump';

const grid = [
    {
        id: 1,
        icon: '/icon/trade/deposit.svg',
        text: 'Deposit',
        click: () => {
            routerTo('/deposit/deposit');
        },
    },
    {
        id: 2,
        icon: '/icon/trade/withdraw.svg',
        text: 'Withdraw',
        click: () => {
            routerTo('/deposit/withdraw');
        },
    },
    {
        id: 3,
        icon: '/icon/trade/transfer.svg',
        text: 'Transfer',
        click: () => {
            routerTo('/deposit/transfer');
        },
    }
];
</script>

<style scoped lang="less">
.trade-link-group {
    width: 100%;
    padding: 3vw 0;

    .grip {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        
        .item {
            display: flex;
            flex-direction: column;
            align-items: center;

            .icon {
                --size: 13vw;
                --w: var(--size);
                --h: var(--size);
            }

            .text {
                font-size: 3vw;
            }
        }
    }
}
</style>